<template>
    <div class="login-wrapper">

      <div class="maiomiao-con">
        <img src="../../../static/images/login/miao.png" class="maiomiao">
      </div>

      <div class="form">
        <x-input   placeholder="请输入您的账号"  v-model="form.userName"  :show-clear="false"></x-input>
        <div class="password-input">
          <x-input type="password" v-model="form.password"  v-if="isLook==false"
                   placeholder="请输入您的密码" :show-clear="false"></x-input>
          <x-input type="text" v-model="form.password" v-else-if="isLook==true"
                   placeholder="请输入您的密码" :show-clear="false"></x-input>
          <span class="eyes-box" @click="eyesClick" v-if="isLook==false">
            <img src="../../../static/images/login/eyes.png" class="eyes">
          </span>
          <span class="eyes-box" @click="eyesClick" v-if="isLook==true">
            <img src="../../../static/images/login/eyes-look.png" class="eyes" style="height: 10px;">
          </span>
        </div>
        <x-button class="submit-btn" @click.native="loginBtn" :disabled="loginDisabled">登录</x-button>
      </div>
      <p class="first-text">首次使用？选择以下方式注册</p>

      <div class="area-click">
          <div class="first-area">
            <img src="../../../static/images/login/scan.png" class="scan">
            <p>扫描疫苗本</p>
          </div>
        <div class="second-area" @click="goRegister">
          <img src="../../../static/images/login/baby.png" class="baby">
          <p>新出生婴儿</p>
        </div>
      </div>

      <img src="../../../static/images/login/registered.png" class="full-img registered-img">

    </div>
</template>

<script>
  import { XInput,XButton  } from 'vux'
  import {login} from '../../api/login/login'

    export default {
        metaInfo () {
          return {
            title: '登录'
          }
        },
        data(){
          return {
            form:{
              userName:'',  // 13665804950   15182427660
              password:''   // 159753  123456
            },
            isLook:false,
          }
        },
        computed:{
          loginDisabled(){
            if(this.form.userName !=='' && this.form.password !==''){
              return false
            }
            return true
          }
        },
        methods:{
          goRegister(){
            this.$router.push({path: '/register'})
          },
          eyesClick(){
            this.isLook=!this.isLook;
          },
          loginBtn(){
            let formData=Object.assign(this.form);
            let that=this;
            login(formData).then((res) => {
              if(res.data.result==0){
                // userId用户   id儿童

                sessionStorage.setItem('userInfo',JSON.stringify(res.data.obj));
                sessionStorage.setItem('userId',res.data.obj.userId)
                sessionStorage.setItem('childId',res.data.obj.id)
               that.$vux.toast.show({
                  text: '登录成功',
                  type:'text',
                  onHide () {
                      that.$router.push({path: '/index'})
                  }
                })
              }else{
                this.$vux.toast.text(res.data.msg, 'middle')
              }
            })
          }
        },
        components: {
          XInput,
          XButton
        }
    }
</script>

<style  lang="scss">
  .login-wrapper{
    background: #f6f6f8;
    .maiomiao-con{
      text-align: center;
      padding:70px 0 100px;
      .maiomiao{
        width:160px;
      }
    }
    .form{
      .weui-cell{
        background: #fff;
        width: 80%;
        margin:0 auto;
        border-radius: 50px;
        box-shadow:-1px 0px 47px 4px rgba(50,51,51,0.06);
        &:first-child{
          margin-bottom: 34px;
        }
        .weui-input{
          color:rgba(38,38,38,1);
          font-size: 14px;
          &::-webkit-input-placeholder {
            color:rgba(173,173,173,1);
            font-size: 14px;
          }
        }
      }
      .submit-btn{
        height:48px;
        background:rgba(245,151,151,1);
        box-shadow:-1px 0px 47px 4px rgba(50,51,51,0.06);
        border-radius:50px;
        width:90%;
        margin:35px auto 0;
        color:rgba(255,255,255,1);
        &.weui-btn_disabled.weui-btn_default{
          opacity: 0.6;
        }
      }
      .password-input{
        position: relative;
        .eyes-box{
          display: inline-block;
          width: 32px;
          height: 40px;
          position: absolute;
          right: 34px;
          top: 0px;
          .eyes{
            width:18px;
            height: 8px;
            padding-top:18px;
          }
        }
        .weui-cell__bd{
          padding-right: 40px;
        }
      }
    }
    .first-text{
      font-size:14px;
      color:rgba(38,38,38,1);
      text-align: center;
      margin-top:25px;
    }
    .area-click{
      text-align: center;
      margin-top: 40px;
      .first-area{
        margin-right: 62px;
        display: inline-block;
      }
      .second-area{
        display: inline-block;
      }
      img{
        width:44px;
        height: 44px;
        margin-bottom: 14px;
      }
      p{
        font-size:14px;
        color:rgba(122,122,122,1);
      }
    }
    .registered-img{
      margin-top:-25px;
    }
    .weui-btn_default:not(.weui-btn_disabled):active{
      color: #fff;
      background-color:#f59797;
    }
  }
</style>
